<template>
  <div class="com-search-col-input-range w83">
    <el-date-picker
      class="datetime-picker"
      v-model="stateTime"
      :disabled-date="pickerOptions"
      type="datetimerange"
      range-separator="-"
      start-placeholder="开始时间"
      end-placeholder="截止时间"
      value-format="YYYY-MM-DD HH:mm"
      @change="getValue"
    ></el-date-picker>
  </div>
</template>
<script lang="ts" setup>
import { TableRow, TableColumn } from "@/utils/baTable";
import { ElDatePicker } from "element-plus";
// import { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
import { reactive, ref, onMounted, inject } from "vue";
import type baTableClass from "@/utils/baTable";
import useCurrentInstance from "@/utils/useCurrentInstance";

const baTable = inject("baTable") as baTableClass;
const { proxy } = useCurrentInstance();
const stateTime = ref(""); //折线图获取时间
//限制用户只能选择当天之前日期
const pickerOptions = (time: Date) => {
  return time.getTime() > Date.now() - 1 * 24 * 60 * 60 * 1000;
};

interface Props {
  renderValue: any; // 单元格值
  renderRow: TableRow; // 当前行数据
  renderField: TableColumn; // 当前列数据
  // renderColumn: TableColumnCtx<TableRow>; // 当前列上下文数据
  // renderIndex: number; // 当前行号
}

const props = defineProps<Props>();

console.log(
  props.renderValue,
  props.renderRow,
  props.renderField
  // props.renderColumn,
  // props.renderIndex
);

const getValue = (value: any) => {
  baTable.comSearch.form = Object.assign(
    baTable.comSearch.form,
    value
      ? {
          params: {
            beginTime: value[0],
            endTime: value[1],
          },
        }
      : { params: {} }
  );
};
proxy.eventBus.on("removeParams", () => {
  stateTime.value = "";
});
</script>
<style lang="scss" scoped>
.com-search-col-input-range {
  display: flex;
  align-items: center;
  // padding: 0 15px;
  width: 66.66%;

  .range-separator {
    padding: 0 5px;
  }
}
:deep(.datetime-picker) {
  width: 100%;
}
.w83 {
  width: 83.5% !important;
}
</style>
